<!doctype html>
<html ng-app="myApp">

	<head>
		<meta charset="UTF-8">
		<title>常规Angularjs框架引用</title>
		<!-- 描述：引用baidu静态资源库 -->
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" type="text/javascript"></script>
		<script src="angularTest_v1.5.x.js" type="text/javascript"></script>
	</head>

	<body>
		<div>
			<label>Name:</label>
			<input type="text" ng-model="yourName" placeholder="Enter a name here...">
			<hr>
			<h1>Hello, {{yourName}}!</h1>
		</div>
		<br>
		<div ng-controller="InvoiceCntl">
			<h1>Invoice:</h1>
			<table>
				<tr>
					<td>Quantity</td>
					<td>Cost</td>
				</tr>
				<tr>
					<td><input type="integer" min="0" ng-model="qty" required></td>
					<td><input type="number" ng-model="cost" required></td>
				</tr>
			</table>
			<hr>
			<b>Total:</b> {{qty * cost | currency}}
		</div>
		<br>
		<div ng-controller="AlbumCtrl" style="display: none;">
			<h1>Images show</h1>
			<ul>
				<li ng-repeat="image in images">
					<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
				</li>
			</ul>
		</div>
		<br>
		<div ng-controller="ActivitiesListCtrl">
			<h3>按国家排序</h3>
			<ul>
				<li ng-repeat="activity in activities|orderBy:'country'">
					{{activity.name+', '+activity.country}}
				</li>
			</ul>
			<h3>按姓名排序</h3>
			<ul>
				<li ng-repeat="activity in activities|orderBy:'name'">
					{{activity.name+', '+activity.country}}
				</li>
			</ul>
		</div>
		<div>
			<h3>CheckBox全选功能</h3>
			<input type="checkbox" ng-model="chkAll"> Check all<br><br>
			<input type="checkbox" ng-checked="chkAll">Volvo<br>
			<input type="checkbox" ng-checked="chkAll">Ford<br>
			<input type="checkbox" ng-checked="chkAll">Mercedes
			<p>点击 "Check all" 选择所有的车。</p>
		</div>
	</body>

</html>